<template>
	<view class="empire-menu__item" :class="{ 'is-active': actived, 'ani-shake': actived }" @click="handleClick">
		<view v-show="actived" class="active-bar"></view>
		<view class="menu-wrap">
			<text>{{ label }}</text>
		</view>
	</view>
</template>

<script setup>
import { computed, inject, ref } from 'vue';

const props = defineProps({
	name: {
		type: [String, Number],
		default: 0
	},
	label: {
		type: String,
		default: undefined
	}
});
const model = inject('model');
const emits = defineEmits(['menu-click']);
const actived = computed(() => model.value === props.name);

function handleClick() {
	model.value = props.name;
	emits('menu-click', props.name);
}
</script>

<style lang="scss" scoped>
.empire-menu__item {
	display: flex;
	align-items: center;
	border-radius: 2rpx;
}

.active-bar {
	width: 8rpx;
	height: 44rpx;
	background-color: #fd6363;
	border-radius: 2rpx;
}

.is-active {
	color: #fd6363 !important;
	background-color: #fdfdfd;
}
.menu-wrap {
	width: 100%;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	padding: 16rpx 0;
	font-size: 30rpx;
}
</style>
